import React, { Component } from "react";
import ReactDOM from "react-dom";
import Jquery from "jquery";
import { connect } from "react-redux";
import { fetchList3 } from "../action/counter.js";
import { setcookie, getcookie, delcookie } from "./cookie";

class Newsdetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: {}
    };
  }
  componentWillUnmount(){
    $("html").scrollTop(0);
   }
   componentDidMount(){
    $(window).on('scroll',function(){
      if($('html').scrollTop()>200){
        $('.mainHeader').hide();
      }else{
        $('.mainHeader').show();
      }

    })
   }
  componentWillMount() {
    var newId = getcookie("NewId");
    // var message=[];
    console.log(newId);
    Jquery.ajax({
      url: "http://10.31.160.71:3000/news/list",
      method: "post",
      data: { rows: 6 }
    }).then(data => {
      for (let i = 0; i < data.rows.length; i++) {
        if (newId == data.rows[i]._id) {
          data.rows[i].date=data.rows[i].date.slice(0,10)
          this.setState({
            message: data.rows[i]
          });
        }
      }
    });
  }

  render() {
    var message = this.state.message;
    console.log(message);
    {
      message.title;
    }
    {
      message.desc;
    }
    {
      message.src;
    }
    {
      message.date;
    }

    return (
      <div>
        <div id="content" className="relative" id="ariacontent">
          <section id="state" className="">
            <div>
              <div id="block-lambo-content">
                <section className="stripe pic row-content  ">
                  <img className="article-top" src={message.src} />
                  <div className="fade">
                    <div className="ncontent relative">
                      <h1>{message.title}</h1>
                    </div>
                  </div>
                </section>
                <div className="breadcrumbs-holder">
                  <ul
                    id="breadcrumbs"
                    role="navigation"
                    aria-label="breadcrumbs"
                  >
                    <li>
                      <a href="http://localhost:8080/#">Home</a>
                    </li>
                    <li>
                      <a href="http://localhost:8080/#/news">新闻</a>
                    </li>
                    <li>
                      <a href="http://localhost:8080/#/newsdetails">
                        {message.title}
                      </a>
                    </li>
                  </ul>
                </div>
                <section id="ariacontent" className="stripe body row-content">
                  <div className="ncontent bodycontent">
                    <a className="btn-back" href="javascript:history.back()">
                       &lt;&lt;&lt; 返回
                    </a>
                    <div>
                      <b
                        className="datetime ng-scope ng-binding"
                        news-date="2018/03/06"
                      >
                        {message.date}
                      </b>
                      <br />
                      <p className="commentContent">{message.desc}</p>
                    </div>
                    <div id="carouselExampleIndicators" className="carousel slide" data-ride="carousel">
                      <ol className="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" className="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                      </ol>
                      <div className="carousel-inner">
                        <div className="carousel-item active">
                          <img className="d-block w-100" src={message.src} alt="First slide" />
                        </div>
                        <div className="carousel-item">
                          <img className="d-block w-100" src={message.src} alt="Second slide" />
                        </div>
                        <div className="carousel-item">
                          <img className="d-block w-100" src={message.src} alt="Third slide" />
                        </div>
                      </div>
                      <a className="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span className="sr-only">Previous</span>
                      </a>
                      <a className="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span className="carousel-control-next-icon" aria-hidden="true"></span>
                        <span className="sr-only">Next</span>
                      </a>
                    </div>
                    <div className="buttons">
                      <a
                        href="http://localhost:8080/#/news/newsdetails/comments"
                        className="btnprevnext next"
                      >
                        用户评论&nbsp;<span>n</span>+<span
                          className="glyphicon glyphicon-menu-right"
                          aria-hidden="true"
                        />
                      </a>
                    </div>
                  </div>
                </section>
              </div>
            </div>
          </section>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    title: state.title3,
    desc: state.desc3,
    lists: state.lists3
  };
};
export default connect(mapStateToProps, { fetchList3 })(Newsdetails);
